<template>
  <div id="container" class="mymap"></div>
</template>
<script>
import AMap from 'AMap' // 在页面中引入高德地图
export default {
  name: 'MapGd',
  mounted () {
    this.loadmap() // 加载地图和相关组件
  },
  data: function () {
    return {
      marker: [{
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
        position: [116.205467, 39.907761]
      }, {
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
        position: [116.368904, 39.913423]
      }, {
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
        position: [116.305467, 39.807761]
      }]
    }
  },
  methods: {
    loadmap () {
      const map = new AMap.Map('container', {
        zoom: 9,
        position: [116.405467, 39.907761]
      })
      map.plugin(['AMap.ToolBar'], function () {
        map.addControl(new AMap.ToolBar())
      })
      map.plugin('AMap.Geolocation', function () {
        const geolocation = new AMap.Geolocation({
          timeout: 10000,
          GeoLocationFirst: false,
          maximumAge: 0
        })
        map.addControl(geolocation)
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', function (data) {
          data.position.getLng() // 定位成功返回的经度
          data.position.getLat() // 定位成功返回的纬度
        }) // 返回定位信息
        AMap.event.addListener(geolocation, 'error', function (data) {
          if (data.info === 'FAILED') {
            // alert('获取您当前位置失败！')
          }
        })
      })
      var markers = [{
        icon: 'http://huang.ngrok.xiaomiqiu.cn/api/tt/1.png',
        position: [120.405467, 30.507761]
      }, {
        icon: 'http://huang.ngrok.xiaomiqiu.cn/api/ww.jpg',
        position: [120.505467, 30.507761]
      }, {
        icon: 'http://huang.ngrok.xiaomiqiu.cn/api/qq.jpg',
        position: [120.605467, 30.507761]
      }]
      // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
      markers.forEach(function (marker) {
        new AMap.Marker({
          map: map,
          icon: marker.icon,
          position: [marker.position[0], marker.position[1]],
          offset: new AMap.Pixel(-12, -36)
        })
      })
    }
  }
}
</script>
<style scoped>
  .mymap {
    background-color: #2fdaff;
    width: 85%;
    height: 400px;
    margin: auto;
    left: 0;
    right: 0;
    margin-top: 10px;
  }
</style>
